<template>
    <section class="wrapper">
      <myHeader :obj="myObj" @events="events"></myHeader>
      <main>
        <subject>
          <span slot="title">{{listDate.Title}}</span>
          <span slot="type">一对一约见</span>
          <span slot="money">{{listDate.Money?listDate.Money.toFixed(2):""}}</span>
        </subject>
        <div class="progress_0313">
          <myProgress :level="level"></myProgress>
        </div>
        <div class="gradeContent_0313">
          <p class="contentTitle_0313">评价一下这次约见（20-300字）<span>*</span></p>
          <textarea class="ctTextarea_0313" placeholder="详细描述这次约见的感受，我们会继续改进" v-model="yoursaid" maxlength="300"></textarea>
        </div>
        <div class="starsWrap_0313">
          <p class="starTitle_0313">感谢你的约见！请对这次的见面进行评价！</p>
          <div class="myStar_0314">
            <myStar :ischeck="true" @changeStar="star"></myStar>
          </div>
           <p class="starTitle_0313">对{{listDate.ExpertName}}的印象（最多三个）：</p>
           <div class="labelWarp_0314">
             <myLabel :closeIcon="true" v-for="(tag,index) in tags" @removetag="removetag(index)" >{{tag}}</myLabel>
             <span class="span_0314" @click="addLabel()" v-if="tagshow">添加标签+</span>
           </div>
        </div>
        <div class="isName_0314">
          <span class="name_0314">匿名评价</span>
          <mt-switch v-model="value"></mt-switch>
        </div>
        <myButton class="btnWs_0321" @sendDate="AskComment">提交评价</myButton>
        <myButton class="btnWs_0321" :type="callType" @rejectDate="complaint">投诉并联系客服</myButton>

      </main>
    </section>
</template>
<script>
import myHeader from './base/myHeader';
import myButton from './base/myButton';
import myProgress from './base/myProgress';
import myStar from './base/myStar';
import myLabel from './base/myLabel';
import subject from './base/subject';
import { MessageBox,Switch,Toast } from 'mint-ui';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch,zdUrl,chatAppId } from '../assets/api';
export default {
  data () {
    return {
      myObj: {
        type: 5,
        text: '约见详情'
      },
      level: 3,
      value: true,
      callType: 2,
      yoursaid:"",
      tags:[],
      tagshow:true,
      loginData:null,
      listDate:{},
      staelevel:0
    }
  },
  created () {
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      this.commentlist();
    })
  },
  methods: {
    events(i){
      if( i == 2) {
        history.back();
      }
    },
    star(msg) {
      this.staelevel = msg
    },
    //评论
    async AskComment(){
      if(!this.yoursaid){
        Toast("评论不能为空")
      } else if(this.staelevel == 0){
        Toast("星级不能为空")
      } else {
        await fetch(API.setAskComment,{
          ...this.loginData[1],
          AppointmentOrderNO:this.$route.query.AppointmentOrderNo,
          Content: this.yoursaid,
          Level: this.staelevel,
          Tallys: this.tags.join(","),
          IsAnonymity:this.value
        });
        this.$router.push({path:"gradeFinish",query:{AppointmentOrderNo:this.$route.query.AppointmentOrderNo}})
      }
    },
    //用户投诉
    async complaint(){
      await fetch(API.AccusemeetOrder,{
        ...this.loginData[1],
        AppointmentOrderNo:this.$route.query.AppointmentOrderNo,
        CancellationReasons:"投诉",
      });
      //跳转到聊天地址
      location.href = `${zdUrl}session?resource=HJ&AppId=${chatAppId}&OpenId=${this.loginData[1].OpenId}&id=100274&selType=C2C`;
    },
    async commentlist(){
      const res = await fetch(API.getOrderList,{
        ...this.loginData[1],
        AppointmentOrderNo:this.$route.query.AppointmentOrderNo
      });
      this.listDate = res.Result;
    },
    addLabel(){
      MessageBox.prompt("", {
        message: "添加标签",
        title: "",
        inputPlaceholder: "添加标签(只截取前5字)",
        closeOnClickModal: false // 点击遮罩层不关闭
      }).then(({ value, action }) => {
        this.tags.push(value)
        if (this.tags.length > 2){
          this.tagshow = false;
        }
      },() => {
        console.log("取消");
      });
    },
    //移除标签
    removetag (num){
      this.tags.splice(num,1);
      if (this.tags.length > 2){
          this.tagshow = false;
        } else {
          this.tagshow = true;
        }
    },
  },
  components: {
    myHeader,
    myButton,
    myProgress,
    myStar,
    myLabel,
    subject,
    "mt-switch":Switch
  }
}

</script>
<style>
.isName_0314 .mint-switch-input:checked + .mint-switch-core {
    border-color: #557AFF;
    background-color: #557AFF;
}
.mint-msgbox-input input{
  border: 1px solid #dedede !important;
}
</style>

<style lang="less">
.wrapper {
  width: 3.75rem;
  height: 100%;
  main {
    width: 3.75rem;
    height: 100%;
    padding-top: .44rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    box-sizing: border-box;
    .callServe_0314 {
      border: .01rem solid #39393D!important;
      background: none!important;
      color: #39393D!important;
     

    }
    .btnWs_0321 {
      margin-bottom: .14rem;
    }
    .isName_0314 {
      width: 100%;
      height: .44rem;
      padding: 0 .15rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: white;
      margin-bottom: .35rem;
      .name_0314 {
        color: #000;
        font-size: .17rem;
      }
    }
    .starsWrap_0313 {
      .labelWarp_0314 {
        overflow: hidden;
        padding-top: .08rem;
        .span_0314 {
          display: block;
          float: left;
          height: .3rem;
          line-height: .3rem;
          font-size: .14rem;
          color: white;
          padding: 0 .1rem;
          border-radius: .04rem;
          background: #828282;
          margin: 0 .1rem 0rem 0;
        }

      }
      padding: .11rem .14rem;
      .starTitle_0313 {
        font-size: .16rem;
        color: #39393D;
      }
      .myStar_0314 {
        padding: .13rem 0 .25rem;
      }
      
    }
    .gradeContent_0313 {
      width: 3.75rem;
      height: 1.61rem;
      background: white;
      padding: .15rem;
      box-sizing: border-box;
        .ctTextarea_0313 {
          width: 100%;
          height: 1rem;
          display: block;
          color: #828282;
          font-size: .14rem;
          border: none;
        }
      .contentTitle_0313 {
        font-size: .14rem;
        padding-bottom: .24rem;
        font-weight: 500;
        span {
          color: #557AFF;
        }
      }
    }
    .progress_0313 {
      padding-bottom: .03rem;
    }
  }
}
  
</style>
